<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Dialog</title>
  <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="styles/jquery-ui.min.css"/>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <style type="text/css">
        .ui-dialog { /*整个弹出框的样式*/
            background : #ea85da;
        }
        .ui-dialog-titlebar { /*弹出框的标题条样式*/
            background : #de9ae2;
            
        }
        .ui-dialog-title { /*弹出框的标题样式*/
            color : black;
        }
        .no-close .ui-dialog-titlebar-close { /*弹出框的关闭按钮样式*/
          display: none;
        }
        .ui-dialog-content { /*弹出框的主体内容样式*/
            background : black !important;
        }
        .ui-dialog-buttonpane { /*弹出框的按钮的容器样式*/
            
        }
        .ui-dialog-buttonset {
            
            width:200px;
            height:50px;
            margin : auto auto;
        }
        .ui-dialog-buttonset .ui-button {
            border-radius:10px;
            border:none ;
        }
    </style>
	<script>
	   $(function() {
       $( "#dialog" ).dialog({
          autoOpen: false, //不自动弹出
          dialogClass: "no-close", //添加class属性
          closeOnEscape:false, // 按 ESC键 不关闭弹出框
          modal : true, // 弹出框时，页面的其他元素不能点击
          buttons: {  //弹出框的按钮
             "Next Song": function() { //显示的内容，点击后的动作
                    alert("show next song");
                    $(this).dialog("close");
              }
          },
          
       });
 
      $( "#opener" ).click(function() {
          $( "#dialog" ).dialog( "open" );
            return false;
          });
      });
	</script>
 </head>
 <body>
	<input id="opener" type="button" value="click me" /> <br />
	<div id="dialog" title="Basic dialog">
       <p>Bingo!!! You Got 100 pts</p>
    </div>
 </body>
</html>
